// Variables
@import "variables.less";

// Mixins
@import "mixins.less";

// Swipe outs
.list-block {
  .swipeout {
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .swipeout.deleting {
    transition: 300ms;
    .swipeout-content {
      transform: translateX(-100%);
    }
  }
  .swipeout.transitioning {
    .swipeout-content, .swipeout-actions-right a, .swipeout-actions-left a, .swipeout-overswipe {
      -webkit-transition: 300ms;
      transition: 300ms;
    }    
  }
  .swipeout-content {
    position: relative;
    z-index: 10;
  }
  .swipeout-overswipe {
    -webkit-transition: 200ms left;
    transition: 200ms left;
  }
  .swipeout-actions-left, .swipeout-actions-right {
    position: absolute;
    top: 0;
    height: 100%;
    .flexbox();
    a {
      padding: 0 1.5rem;
      color:#fff;
      background: #c7c7cc;
      .flexbox();
      .align-items(center);
      position: relative;
      left: 0;
      &:after {
        content:'';
        position: absolute;
        top: 0;
        width: 600%;
        height: 100%;
        background: inherit;
        z-index: -1;
      }
    }
    a.swipeout-delete {
      background: @color-danger;
    }
  }
  .swipeout-actions-right {
    right: 0%;
    transform: translateX(100%);
    a:after {
      left: 100%;
      margin-left: -1px;
    }
  }
  .swipeout-actions-left {
    left: 0%;
    transform: translateX(-100%);
    a:after {
      right: 100%;
      margin-right: -1px;
    }
  }
}
